<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import TnListItem from '@tuniao/tnui-vue3-uniapp/components/list/src/list-item.vue'
import TnButton from '@tuniao/tnui-vue3-uniapp/components/button/src/button.vue'
import TnModal from '@tuniao/tnui-vue3-uniapp/components/modal/src/modal.vue'
import { tnNavPage } from '@tuniao/tnui-vue3-uniapp/utils'
import type { TnModalInstance } from '@tuniao/tnui-vue3-uniapp/components/modal'
import type { NavbarRectInfo } from '@tuniao/tnui-vue3-uniapp/components/navbar'
import { FILE_URL, SYSTEM_CONFIG, USER_INFO, USER_TOKEN } from '@/api/config'
import PageContainer from '@/components/page-container/index.vue'
import account from '@/api/account.js'

const modalRef = ref<TnModalInstance>()
// 导航栏的高度
const navbarHeight = ref(0)
const state = reactive({
  logo: '',
  userAgreement: '',
  privacyPolicy: '',
  communityCovenants: '',
})
// 导航栏初始化完毕
const navbarInitFinishHandle = (info: NavbarRectInfo) => {
  navbarHeight.value = info.height
}

const logoutAccount = () => {
  modalRef.value?.showModal({
    title: '注销账号',
    content: '注销账号后，六个月内将无法再次注册，您确定要注销吗？',
    showCancel: true,
    confirmText: '确认',
    cancelText: '取消',
    cancel: () => {
      console.log('点击了取消按钮')
    },
    confirm: () => {
      console.log('点击了确认按钮')
      account
        .logoutAccount()
        .then((res) => {
          uni.showToast({
            title: res.msg,
            duration: 2000,
            icon: 'none',
          })
          if (res.code == 1) {
            uni.removeStorageSync(USER_TOKEN)
            uni.removeStorageSync(USER_INFO)
            setTimeout(() => {
              uni.reLaunch({
                url: '/pages/index/index',
              })
            }, 2000)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
  })
}

const logout = () => {
  account
    .logout()
    .then((res) => {
      uni.showToast({
        title: res.msg,
        duration: 2000,
        icon: 'none',
      })
      if (res.code == 1) {
        uni.removeStorageSync(USER_TOKEN)
        uni.removeStorageSync(USER_INFO)

        setTimeout(() => {
          uni.reLaunch({
            url: '/pages/index/index',
          })
        }, 2000)
      }
    })
    .catch((err) => {
      console.log(err)
    })
}

onMounted(() => {
  const systemConfig = uni.getStorageSync(SYSTEM_CONFIG)
  state.logo = systemConfig.basic.app_logo
  state.userAgreement = systemConfig.agreement.user_agreement
  state.privacyPolicy = systemConfig.agreement.privacy_policy
  state.communityCovenants = systemConfig.agreement.community_covenants
})
</script>

<template>
  <PageContainer :placeholder-bottom="true">
    <TnNavbar
      fixed
      :bottom-shadow="false"
      :placeholder="false"
      @init-finish="navbarInitFinishHandle"
    >
      设置
    </TnNavbar>

    <view
      class="set-container"
      :style="{ paddingTop: `${navbarHeight + 10}px` }"
    >
      <view class="list-container">
        <view class="list-item">
          <TnListItem
            bottom-border
            bottom-border-indent
            right-icon=""
            :custom-style="{
              borderRadius: '15rpx 15rpx 0rpx 0rpx',
            }"
          >
            <view class="list-content">
              <image
                class=""
                :src="FILE_URL + state.logo"
                mode="widthFix"
                style="width: 300rpx; height: 300rpx; border-radius: 50%; margin: 60rpx auto 30rpx"
              />
            </view>
          </TnListItem>
          <TnListItem bottom-border bottom-border-indent right-icon="">
            <view class="list-content">
              <view class="text tn-flex">系统版本</view>
              <view class="tn-text-xs sub-text"> V2.0.1 </view>
            </view>
          </TnListItem>
          <TnListItem
            bottom-border
            bottom-border-indent
            right-icon="right"
            @click="tnNavPage(state.userAgreement)"
          >
            <view class="list-content">
              <view class="text tn-flex">用户协议</view>
            </view>
          </TnListItem>
          <TnListItem
            bottom-border
            bottom-border-indent
            right-icon="right"
            @click="tnNavPage(state.privacyPolicy)"
          >
            <view class="list-content">
              <view class="text tn-flex">隐私政策</view>
            </view>
          </TnListItem>
          <TnListItem
            bottom-border
            bottom-border-indent
            right-icon="right"
            @click="tnNavPage(state.communityCovenants)"
          >
            <view class="list-content">
              <view class="text tn-flex">社区公约</view>
            </view>
          </TnListItem>
          <TnListItem
            bottom-border
            bottom-border-indent
            right-icon="right"
            @click="tnNavPage('/pagesA/aboutus')"
          >
            <view class="list-content">
              <view class="text tn-flex">关于我们</view>
            </view>
          </TnListItem>
          <TnListItem
            bottom-border
            bottom-border-indent
            right-icon="right"
            @click="logoutAccount"
          >
            <view class="list-content">
              <view class="text tn-flex">注销账号</view>
              <view class="tn-text-xs sub-text"> 六个月内无法再次注册 </view>
            </view>
          </TnListItem>
          <TnModal ref="modalRef" />
          <TnListItem bottom-border bottom-border-indent right-icon="">
            <view class="list-content">
              <view class="text tn-flex">技术支持</view>
              <view class="tn-text-xs sub-text"> QQ：1365962177 </view>
            </view>
          </TnListItem>
          <TnListItem
            bottom-border
            bottom-border-indent
            right-icon=""
            :custom-style="{
              borderRadius: ' 0rpx 0rpx 15rpx 15rpx',
            }"
          >
            <view class="list-content">
              <TnButton
                width="80%"
                height="80rpx"
                type="danger"
                shape="round"
                :shadow="true"
                :bold="true"
                :custom-style="{
                  margin: '60rpx auto',
                  fontSize: '34rpx',
                }"
                :debounce="true"
                @click="logout"
              >
                退出登录
              </TnButton>
            </view>
          </TnListItem>
        </view>
      </view>
    </view>
  </PageContainer>
</template>
<style lang="scss" scoped>
.set-container {
  background-color: var(--tn-color-gray-light);
  min-height: 100vh;
  padding: 30rpx 30rpx;
  .list-container {
    width: 100%;

    .list-item {
      position: relative;
      width: 100%;
      margin-top: 20rpx;

      & + .list-item {
        margin-top: 30rpx;
      }

      .list-content {
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;
        line-height: 1;

        .title {
          flex: 1;
          text-align: left;
        }

        .sub-title {
          margin-top: 20rpx;
          flex: 1;
          text-align: left;
          color: #9c9c9c;
        }

        .text {
          flex: 1;
          text-align: left;
        }
        .sub-text {
          margin-left: auto;
          text-align: right;
          color: #9c9c9c;
        }
      }
    }
  }
}
</style>
